<template>
  <div>
    <el-dialog
      width="1200px"
      :title="$t('店铺sku种类(订单导入后对店铺sku的修改可能会影响店铺sku的销量统计，库存不会影响)')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-table :height="calTableHeight() - 80" v-loading="loading" :data="tableData">
        <el-table-column show-overflow-tooltip type="selection" width="55" align="center" />
        <el-table-column show-overflow-tooltip :label="$t('店铺SKU')" align="center" prop="shopSku" />
        <el-table-column :label="$t('图片')" align="center" prop="imgUrl">
          <template slot-scope="{ row }">
            <el-image
              fit="contain"
              style="width: 50px; height: 50px"
              :key="Math.random()"
              v-hover="row.imgUrl"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('店铺库存')" align="center" prop="stock" />
        <el-table-column :label="$t('店铺SKU类型')" align="center" prop="shopSkuType" width="150">
          <template slot-scope="{ row }">
            <!-- 店铺SKU类型 1-单品 2-组合 -->
            <div v-if="row.shopSkuType == 1" style="color: green">
              {{ $t('单品') }}
            </div>
            <div v-if="row.shopSkuType == 2" style="color: blueviolet">
              {{ $t('组合') }}
            </div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('单品SKU')" align="center" prop="skuNo" width="150">
          <template slot-scope="{ row }">
            <div @click="handleEdit(row)" style="cursor: pointer; color: #1890ff">
              {{ row.skuNo }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('组合SKU')" align="center" prop="combinationName" width="150">
          <template slot-scope="{ row }">
            <span style="color: #1890ff; cursor: pointer" @click="handleCombinationInfo(row)">
              {{ row.combinationName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip width="80" label="URL" align="center" prop="url">
          <template slot-scope="{ row }">
            <a :href="row.url" target="_blank">{{ row.url }}</a>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip :label="$t('销售数量')" align="center" prop="saleNum" />

        <el-table-column show-overflow-tooltip :label="$t('备注')" align="center" prop="remark" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer">
        <el-button @click="cancel">
          {{ $t('关闭') }}
        </el-button>
      </div>
    </el-dialog>
    <!-- 组合 sku列表 -->
    <el-dialog :visible.sync="combinationInfo.show" width="80%" append-to-body :title="combinationInfo.title">
      <el-table ref="TableRef" :data="combinationInfo.formData">
        <!-- sku -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="skuNo"
          :label="$t('单品SKU')"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <div @click="handleEdit(row)" style="cursor: pointer; color: #1890ff">
              {{ row.skuNo }}
            </div>
          </template>
        </el-table-column>
        <!-- 图片 -->
        <el-table-column prop="imgUrl" :label="$t('图片')" align="center">
          <template slot-scope="{ row }">
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="row.imgUrl"
              style="width: 50px; height: 50px"
              class="goods-img-mini"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <!-- 名字 -->
        <el-table-column show-overflow-tooltip width="200" prop="skuNameCn" :label="$t('中文名')" align="center" />
        <el-table-column show-overflow-tooltip width="200" prop="skuNameJp" :label="$t('日文名')" align="center" />

        <!-- 组合数量 -->
        <el-table-column :label="$t('组合数量')" prop="combinationNum" align="center"> </el-table-column>
        <!-- 规格 -->
        <el-table-column show-overflow-tooltip prop="specificatio" :label="$t('规格')" align="center" />

        <!-- 可售数量 -->
        <el-table-column show-overflow-tooltip prop="saleNum" :label="$t('可售数量')" align="center" />
      </el-table>
    </el-dialog>
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>
<script>
import { batchShopSkuList } from '@/api/distribution/orderBatchs/index'
import { getCombinationSkuByCombinationId } from '@/api/distribution/sku/storeSkuList'
import Skucontmoduler from '@/components/Skucontmoduler'
export default {
  components: { Skucontmoduler },

  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**组合sku列表 */
      combinationInfo: {
        show: false,
        title: '',
        formData: {},
      },
      /**表格数据 */
      tableData: [],
      loading: false,
      /**总条数 */
      total: 0,
      /**分页相关查询参数 */
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    handleCombinationInfo(row) {
      this.combinationInfo.title = row.combinationName

      getCombinationSkuByCombinationId(row.combinationId).then((res) => {
        const { code, data } = res
        this.combinationInfo.show = true
        this.combinationInfo.formData = data
      })
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },
    getList() {
      this.loading = true
      const data = { ...this.queryParams, batchId: this.formData.id }
      batchShopSkuList(data)
        .then((res) => {
          this.tableData = res.rows
          this.total = res.total
        })
        .finally(() => (this.loading = false))
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
